昨天我們學了文字行高 (line-height) 控制，今天來討論另一個核心技能：CSS 長度單位與大小控制!

1. 為什麼單位很重要？

CSS 的單位決定了元件尺寸、排版彈性與響應式能力，
常見問題：

• 寬度寫 200 → 無效
• 字體寫 16 → 只有數字，沒有單位，不知道該如何渲染
• RWD 失效 → 不懂單位相對於什麼

理解單位 = 能準確控制畫面

2. 常用單位解析

3. 範例：文字與按鈕大小控制

HTML

<button class="btn-px">PX 按鈕</button>
<button class="btn-em">EM 按鈕</button>
<button class="btn-rem">REM 按鈕</button>

CSS

.btn-px {
  font-size: 16px;      /* 絕對字體 */
  padding: 10px 20px;
}

.btn-em {
  font-size: 1em;       /* 跟父元素字體一樣 */
  padding: 0.5em 1em;   /* padding 也相對字體大小 */
}

.btn-rem {
  font-size: 1.2rem;    /* 相對 html 字體大小，統一縮放 */
  padding: 0.75rem 1.5rem;
}

• px → 精準控制，不會隨父元素改變
• em → 適合局部相對控制，元件隨父元素縮放
• rem → 適合全站統一比例，RWD 更穩定

父元素與子元素

舉例來說就是先做了一個大盒子，裡面再分別放入盒子A、B、C，
像俄羅斯娃娃一樣一個套著其他的，在尚未加CSS樣式之前，
這個網頁只會看到單純的ABC，看不到前述語法中的分層關係。
而box class夾住boxA、boxB、boxC......

由上例可判斷：
box就是父元素，boxA、boxB、boxC就是box的子元素，
只要將CSS樣式套在box上，boxA、boxB、boxC都會改變

4. 範例：寬高與 RWD

HTML：

<div class="box-px">PX Box</div>
<div class="box-percent">% Box</div>
<div class="box-vw">VW Box</div>

CSS：

.box-px {
  width: 200px;
  height: 100px;
  background: #ffadad;
}

.box-percent {
  width: 50%;      /* 父容器的一半 */
  height: 50%;
  background: #ffd6a5;
}

.box-vw {
  width: 50vw;     /* 視窗寬度的一半 */
  height: 20vh;    /* 視窗高度的 20% */
  background: #caffbf;
}

• 固定 px → 適合小元件或精準設計
• % → 父容器彈性控制
• vh/vw → 滿屏或相對視窗的元件

5. 小技巧：單位混用

1. 字體用 rem → 統一全站字體大小
2. padding/margin 用 em → 元件內間距隨字體縮放
3. 元件寬高用 % 或 vw/vh → RWD 自適應

寫法邏輯：用相對單位保證彈性，用絕對單位保證精準

學習心得

1. 單位選擇影響排版彈性
   以前常用 px 固定數字，但 RWD 下容易破版。這次學了 em、rem、%、vh、vw，才發現文字、按鈕、區塊都能隨父元素或視窗自動縮放

2. 元件與文字的比例控制
   line-height + rem/em padding 配合使用 → 元件高度自動調整，
   文字垂直置中不必再用 margin-top 調整，省時又穩定

3. RWD 思維
   以前只會加 media query 調整寬度，現在明白單位本身就能解決彈性問題，例如：按鈕寬度用 % 或 vw → 手機、桌面都能自適應